<template>
  <el-card>
    <div class="leave-application-header">
      <h2>员工请假申请</h2>
    </div>

    <el-form :model="leaveForm" ref="leaveForm" label-width="100px" class="leave-form">
      <el-form-item label="员工姓名" prop="name" :rules="[{ required: true, message: '请输入员工姓名', trigger: 'blur' }]">
        <el-input v-model="leaveForm.name" placeholder="请输入员工姓名" style="width: 300px"></el-input>
      </el-form-item>

      <el-form-item label="请假天数" prop="day" :rules="[{ required: true, message: '请输入请假天数', trigger: 'blur' }]">
        <el-input-number v-model="leaveForm.day" :min="1" :max="30" placeholder="请输入请假天数" style="width: 300px"></el-input-number>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitLeave">提交申请</el-button>
        <el-button @click="resetForm">重置</el-button>
        <el-button type="success" @click="viewApplications">查看所有申请</el-button>
      </el-form-item>
    </el-form>

    <!-- 申请记录对话框 -->
    <el-dialog title="所有请假申请" v-model="dialogVisible" width="60%">
      <el-table :data="applications" style="width: 100%" border>
        <el-table-column prop="taskId" label="ID" width="320"></el-table-column>
        <el-table-column prop="name" label="员工姓名" width="100"></el-table-column>
        <el-table-column prop="day" label="请假天数" width="100"></el-table-column>
        <el-table-column prop="createTime" label="申请时间" width="200"></el-table-column>
        <el-table-column prop="status" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>

      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import { ElMessage } from "element-plus";
import { addApplication, getApplications } from "../api/employee.js";

export default {

  name: "Employee",
  data() {
    return {
      leaveForm: {
        name: '',
        day: 1
      },
      dialogVisible: false,
      applications: []
    }
  },
  methods: {
    getStatusText(status) {
      switch (status) {
        case 0:
          return '待主任审核';
        case 1:
          return '待院长审核';
        case 2:
          return '已通过';
        case 3:
          return '已拒绝';
        default:
          return '未知状态';
      }
    },
    getStatusType(status) {
      switch (status) {
        case 0: // 待主任审核
          return 'warning';
        case 1: // 待院长审核
          return 'primary';
        case 2: // 已通过
          return 'success';
        case 3: // 已拒绝
          return 'danger';
        default:
          return '';
      }
    },
    submitLeave() {
      this.$refs.leaveForm.validate(async (valid) => {
        if (valid) {
          try {
            console.log("提交请假申请:", this.leaveForm);
            let { data } = await addApplication(this.leaveForm.name, this.leaveForm.day);
            console.log(data);
            if (data.code === 200) {
              ElMessage.success('请假申请提交成功');
              this.resetForm();
            } else {
              ElMessage.error(data.msg || '请假申请提交失败');
            }
          } catch (error) {
            ElMessage.error('请假申请提交失败: ' + error.message);
          }
        }
      });
    },

    resetForm() {
      this.$refs.leaveForm.resetFields();
    },

    async viewApplications() {
      try {
        const { data } = await getApplications();
        console.log(data);
        if (data.code === 200) {
          // 临时处理：为每条记录添加默认状态
          this.applications = data.obj.map(item => ({
            ...item,
            status: item.status !== undefined ? item.status : 0 // 默认为待审核状态
          }));
          this.dialogVisible = true;
        } else {
          ElMessage.error(data.msg || '获取申请记录失败');
        }
      } catch (error) {
        ElMessage.error('获取申请记录失败: ' + error.message);
      }
    },

  }
}
</script>
